/*********** screen配置 ***********/
@screen: 750; //设计图宽度
@remSize: 75; //1rem对应的px值(设计图按照750计算)
@convert: 1 rpx;

//px转rpx
.pxToRpx(@cssName,@px) {
    @{cssName}: @px*@convert;
}

.toRem (@self,@rem) {
    @{rem}: @self/@remSize*1rem;
}

//转换为百分比
.toPercentage (@numerato, @denominator) {
  @percentage: @numerato/@denominator*100%;
}

.b1px(@color,@height) {
  &::before {
    content: '';
    height: @height;
    background: @color;
  }
}

//border-radius
.borderRadius (@radius) {
  border-radius: @radius/@remSize*1rem;
}

//外边距rem换算
.marginTop(@slef) {
  margin-top: @slef/@remSize*1rem;
}

.marginRight(@slef) {
  margin-right: @slef/@remSize*1rem;
}

.marginBottom(@slef) {
  margin-bottom: @slef/@remSize*1rem;
}

.marginLeft(@slef) {
  margin-left: @slef/@remSize*1rem;
}

.margin(@px) {
  margin: @px/@remSize*1rem;
}

.margin2(@vertical, @horizontal) {
  margin: @vertical/@remSize*1rem @horizontal/@remSize*1rem;
}

.margin3(@top, @right, @bottom) {
  margin: @top/@remSize*1rem @right/@remSize*1rem @bottom/@remSize*1rem 0;
}

.margin4(@top, @right, @bottom, @left) {
  margin: @top/@remSize*1rem @right/@remSize*1rem @bottom/@remSize*1rem @left/@remSize*1rem;
}

.paddingTop(@slef) {
  padding-top: @slef/@remSize*1rem;
}

.paddingRight(@slef) {
  padding-right: @slef/@remSize*1rem;
}

.paddingBottom(@slef) {
  padding-bottom: @slef/@remSize*1rem;
}

.paddingLeft(@slef) {
  padding-left: @slef/@remSize*1rem;
}

.padding(@four) {
  padding: @four/@remSize*1rem
}

.padding2(@vertical, @horizontal) {
  padding: @vertical/@remSize*1rem @horizontal/@remSize*1rem;
}

.padding3(@top, @right, @bottom) {
  padding: @top/@remSize*1rem @right/@remSize*1rem @bottom/@remSize*1rem 0;
}

.padding4(@top, @right, @bottom, @left) {
  padding: @top/@remSize*1rem @right/@remSize*1rem @bottom/@remSize*1rem @left/@remSize*1rem;
}

.marginP(@slef, @par) {
  margin: @slef/@par*100% @slef/@par*100% @slef/@par*100% @slef/@par*100%;
}

.marginTopP(@slef, @par) {
  margin-top: @slef/@par*100%;
}

.marginRightP(@slef, @par) {
  margin-right: @slef/@par*100%;
}

.marginBottomP(@slef, @par) {
  margin-bottom: @slef/@par*100%;
}

.marginLeftP(@slef, @par) {
  margin-left: @slef/@par*100%;
}

//内边距百分比换算
.paddingTopP(@slef, @par) {
  padding-top: @slef/@par*100%;
}

.paddingRightP(@slef, @par) {
  padding-right: @slef/@par*100%;
}

.paddingBottomP(@slef, @par) {
  padding-bottom: @slef/@par*100%;
}

.paddingLeftP(@slef, @par) {
  padding-left: @slef/@par*100%;
}

//宽度与高度rem换算
.widthSingle(@slef) {
  width: @slef/@remSize*1rem;
}

.maxWidth(@slef) {
  max-width: @slef/@remSize*1rem;
}

.widthP(@slef, @par) {
  width: @slef/@par*100%;
}

.width(@slef) {
  width: @slef/@remSize*1rem;
  height: @slef/@remSize*1rem;
}

.minWidth(@slef) {
  min-width: @slef/@remSize*1rem;
}

.heightSingle(@slef) {
  height: @slef/@remSize*1rem;
}

.heightP(@slef, @par) {
  height: @slef/@par*100%;
}

.minheight(@slef) {
  min-height: @slef/@remSize*1rem;
}

.maxHeight(@slef) {
  max-height: @slef/@remSize*1rem;
}

//模块百分比换算并水平居中
.sectionWidth(@slef, @par) {
  width: @slef/@par*100%;
  /*margin: 0 auto;*/
}

.sectionHeight(@slef, @par) {
  height: @slef/@par*100%;
}

//行高rem换算
.lineHeight(@slef) {
  line-height: @slef/@remSize*1rem;
}

//字体类型
.fontFamily(@fontType) {
  font-family: @fontType;
}

.fontWeight(@fontType) {
  font-weight: @fontType;
}

.fontSize(@slef) {
  font-size: @slef/@remSize*1rem;
}

.backgroundSize(@width, @height) {
  background-size: @width/@remSize*1rem @height/@remSize*1rem;
}

.top(@slef) {
  top: @slef/@remSize*1rem;
}

.left(@slef) {
  left: @slef/@remSize*1rem;
}

.bottom(@slef) {
  bottom: @slef/@remSize*1rem;
}

.right(@slef) {
  right: @slef/@remSize*1rem;
}

.topP(@slef, @par) {
  top: @slef/@par*100%;
}

.leftP(@slef, @par) {
  left: @slef/@par*100%;
}

.bottomP(@slef, @par) {
  bottom: @slef/@par*100%;
}

.rightP(@slef, @par) {
  right: @slef/@par*100%;
}

//边框top/left/right/bottom宽度定义
.borderTop(@slef) {
  border-top-width: @slef/@remSize*1rem;
  @media (max-width: ((@screen/@slef) *1px)) {
    border-top-width: 1px;
  }
}

.borderRight(@slef) {
  border-right-width: @slef/@remSize*1rem;
  @media (max-width: ((@screen/@slef) *1px)) {
    border-right-width: 1px;
  }
}

.border(@slef) {
  border-width: @slef/@remSize*1rem;
  @media (max-width: ((@screen/@slef) *1px)) {
    border-width: 1px;
  }
}

.border2(@a, @b) {
  border-width: @a/@remSize*1rem @b/@remSize*1rem;
  @media (max-width: ((@screen/@slef) *1px)) {
    border-width: @a/@remSize*1rem @b/@remSize*1rem;
  }
}

//border-radius
.borderRadius(@slef) {
  border-radius: @slef/@remSize*1rem;
}

.borderRadiusTr(@slef) {
  border-top-right-radius: @slef/@remSize*1rem;
}

.borderRadiusBr(@slef) {
  border-bottom-right-radius: @slef/@remSize*1rem;
}

.borderRadiusTl(@slef) {
  border-top-left-radius: @slef/@remSize*1rem;
}

.borderRadiusBl(@slef) {
  border-bottom-left-radius: @slef/@remSize*1rem;
}

.borderFull(@slef, @style, @color) {
  border: @slef/@remSize*1rem @style @color;
}

.borderWidth3(@top, @right, @bottom) {
  border-width: @top/@remSize*1rem @right/@remSize*1rem @bottom/@remSize*1rem;
}

.borderLeftWidth(@left) {
  border-left-width: @left/@remSize*1rem;
}

.borderRightWidth(@left) {
  border-right-width: @left/@remSize*1rem;
}

.borderBottomWidth(@left) {
  border-bottom-width: @left/@remSize*1rem;
}

.borderWidthTop(@top) {
  border-top-width: @top/@remSize*1rem;
}

//图片width转字体图标字体大小
.iconFont(@imgWidth) {
  font-size: @imgWidth * 1.6/@remSize*1rem
}

//位移
.translate(@slef1, @slef2, @slef3) {
  transform: translate3d(@slef1/@remSize*1rem, @slef2/@remSize*1rem, @slef3/@remSize*1rem);
}

//多行省略号
.text-elipsis-lines(@lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
}

.verticalAlign(@px) {
  vertical-align: @px/@remSize*1rem;
}

.text-elli() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.transformX(@val) {
  transform: translate3d(@val, 0, 0);
}

.transformY(@val) {
  transform: translate3d(0, @val, 0);
}

.transformXRem(@val) {
  transform: translate3d(@val/@remSize*1rem, 0, 0);
}

.transformYRem(@val) {
  transform: translate3d(0, @val/@remSize*1rem, 0);
}

.letterSpace(@val) {
  letter-spacing: @val/@remSize*1rem;
}

.boxShadow(@val,@val1,@val2,@val3,@color) {
  box-shadow: @val/@remSize*1rem @val1/@remSize*1rem @val2/@remSize*1rem @val3/@remSize*1rem @color;
}

.flex1() {
  //-webkit-box-flex:1;
  //-webkit-flex:1;
  flex: 1;
}

.flexN(@num) {
  //-webkit-box-flex:@num;
  //-webkit-flex:@num;
  flex: @num;
}

.flex() {
  /*display: -webkit-box;
  display: -webkit-flex;*/
  display: flex;
}

.flex-auto() {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

// flex列排列, 让子类像display:inline-block那样排列
.flex-row() {
  display: flex;
  flex-direction: row;
}

// flex行排列, 让子类像display:block那样排列
.flex-column() {
  display: flex;
  flex-direction: column;
}

//flex 水平居中, horizontal center简写成hc
.flex-hc() {
  //-webkit-align-items: center;
  align-items: center;
}

//flex 垂直居中, vertical center简写vc
.flex-vc() {
  //-webkit-justify-content: center;
  justify-content: center;
}

.flex-ve() {
  //-webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.justify-end() {
  //-webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-around() {
  //-webkit-justify-content: space-around;
  justify-content: space-around;
}

.flex-between() {
  //-webkit-justify-content: space-between;
  justify-content: space-between;
}

//flex 垂直水平居中, horizontal center简写成hc, vertical center简写vc
.flex-hvc() {
  //-webkit-align-items: center;
  align-items: center;
  //-webkit-justify-content: center;
  justify-content: center;
}

.box-sizing() {
  box-sizing: border-box;
}

.wordSpacing(@val) {
  word-spacing: @val/@remSize*1rem;
}

.noscroll() {
  width: 0;
  height: 0;
  color: transparent;
}

/**
三角形适用pc端
**/
/*箭头向左*/
.tringleLeftPC(@val,@color) {
  width: 0;
  height: 0;
  border-top:@val*1px solid transparent;
  border-bottom:@val*1px solid transparent;
  border-right:@val*1px solid @color;
}
/*箭头向右*/
.tringleRightPC(@val,@color) {
  width: 0;
  height: 0;
  border-top:@val*1px solid transparent;
  border-bottom:@val*1px solid transparent;
  border-left:@val*1px solid @color;
}
/*箭头向上*/
.tringleUpPC(@val,@color) {
  width: 0;
  height: 0;
  border-left:@val*1px solid transparent;
  border-right:@val*1px solid transparent;
  border-bottom:@val*1px solid @color;
}
/*箭头向下*/
.tringleDownPC(@val,@color) {
  width: 0;
  height: 0;
  border-left:@val*1px solid transparent;
  border-right:@val*1px solid transparent;
  border-top:@val*1px solid @color;
}
/**
三角形适用移动端
**/
/*箭头向左*/
.tringleLeftM(@val,@color) {
  width: 0;
  height: 0;
  border-top:@val/@remSize*1rem solid transparent;
  border-bottom:@val/@remSize*1rem solid transparent;
  border-right:@val/@remSize*1rem solid @color;
}
/*箭头向右*/
.tringleRightM(@val,@color) {
  width: 0;
  height: 0;
  border-top:@val/@remSize*1rem solid transparent;
  border-bottom:@val/@remSize*1rem solid transparent;
  border-left:@val/@remSize*1rem solid @color;
}
/*箭头向上*/
.tringleUpM(@val,@color) {
  width: 0;
  height: 0;
  border-left:@val/@remSize*1rem solid transparent;
  border-right:@val/@remSize*1rem solid transparent;
  border-bottom:@val/@remSize*1rem solid @color;
}
/*箭头向下*/
.tringleDownPC(@val,@color) {
  width: 0;
  height: 0;
  border-left:@val/@remSize*1rem solid transparent;
  border-right:@val/@remSize*1rem solid transparent;
  border-top:@val/@remSize*1rem solid @color;
}